<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/vue.js"></script>
    <script src="static/js/jquery.js"></script>
    <style>
        .active {
            background-color: chartreuse;
        }
    </style>
</head>
<body>
<div id="page">
    <table>
        <thead>
        <tr>
            <td>学号</td>
            <td>姓名</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in students">
            <td>{{item.num}}</td>
            <td>{{item.name}}</td>
        </tr>
        </tbody>
    </table>
    <div>
        <div v-if="true">
            <button @click="showpagecur(-1)"><</button>
            <button @click="showpage(item)" v-for="item in studentscount"
                    :class="{active:item==numpage}">
                {{item}}
            </button>
            <button @click="showpagecur(1)">></button>
        </div>
        <div v-else>
            <button v-for="item in 6"
                    :class="{active:item==numpage}"
                    @click="showpage(item)">
                {{item}}
            </button>
            <button>...</button>
        </div>
    </div>
</div>
<script>
    let vue = new Vue({
        el: "#page",
        data: {
            students: [
                {
                    num: 1,
                    name: "李华1"
                }
            ],
            studentscount:0,
            pagecount:9,
            /*item,*/
            numpage:1,

        },
        created() {
            this.getData();
            // $.ajax("/studentlist", {
            //     success: data => this.students = data
            // })
        },
        methods: {
            showpage(page) {
                this.numpage = page;
                this.getData();
            },
            showpagecur(cur) {
                if ((this.numpage == 1 && cur < 0) || (this.numpage == this.studentscount && cur > 0)) {
                    return;
                }
                this.numpage+=cur;
                this.getData();
            },
            getData(){
                $.ajax("/studentpage",{
                    data:{
                        pagecount:this.pagecount,
                        numpage:this.numpage
                    },
                    success:data=>{
                        this.students=data.items;
                        this.studentscount=Math.ceil(data.sumcount/this.pagecount);
                    }
                });
            }
        }
    });
</script>
</body>
</html>